<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Vue 自定义指令</title>
	</head>

	<body>
		<div id="app">
			<p style="color: red;">Vue全局api是在构造器外部的，是需要先声明全局变量或者直接在vue上进行定义的一些新功能。简而言之：在构造器外不用vue提供的API函数来定义新的功能</p>
			<p style="color: green;">自定义函数有五个钩子函数，即生命周期（bind,inserted,update,componentUpdated,unbind）</p>
			<p style="color: green;">bind:初始化时执行的一次绑定</p>
			<p style="color: green;">inserted:被绑定元素插入父节点之后调用</p>
			<p style="color: green;">update：更新元素或者DOM在改变值时调用，更新时常用的一种</p>
			<p style="color: green;">componentUpdated：更新完成后调用</p>
			<p style="color: green;">unbind：解除绑定</p>
			<hr />
			<p v-zidingyi="fontColor">{{num}}</p>
			<p><button @click="add">add</button></p>
			<hr />
			<code>
				Vue.directive("zidingyi",function (el ,binding) {
				el.style = "color:" + binding.value;
			})
			</code>
			<h4>console.log(el)</h4><br /><span v-text="tet"></span>
			<hr />
			<h4>console.log(binding)</h4><br /><span>Object {name: "zidingyi", rawName: "v-zidingyi", value: "red", expression: "fontColor"}</span>
			<hr />
			<h4>console.log(binding.name)</h4><br /><span>zidingyi</span>
			<hr />
			<h4>console.log(binding.value)</h4><br /><span>red</span>
			<hr />
			<h4>console.log(binding.expression)</h4><br /><span>fontColor</span>
		</div>
			<p><button onclick="unbind()">解除绑定关系</button></p>
		<script src="../assets/js/jquery.min.js"></script>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			function unbind () {
				vm.$destroy();
			}
			//声明自定义指令，并调用
			//			Vue.directive("zidingyi",function (el ,binding) {
			//				console.log(el);
			//				console.log(binding);
			//				console.log(binding.name);
			//				console.log(binding.value);
			//				console.log(binding.expression)
			//				el.style = "color:" + binding.value;
			//			})

			//生命周期调用
			Vue.directive("zidingyi", {
					//自定义函数有五个钩子函数（生命周期）
					bind: function(el, binding) { //被绑定
						console.log('1 - bind');
						el.style = "color:" + binding.value;
					},
					inserted: function() { //绑定到节点
						console.log('2 - inserted');
					},
					update: function() { //组件更新
						console.log('3 - update');
					},
					componentUpdated: function() { //组件更新完成
						console.log('4 - componentUpdated');
					},
					unbind: function() { //解绑
						console.log('5 - unbind');
					}
				}

			)

			var vm = new Vue({
				el: '#app',
				data: {
					message: 'Hello World !',
					content: 'Vue.js !',
					num: 10,
					fontColor: 'red',
					tet: '<p style="color: red;">10</p>' //由于el在控制台输出带有标签会被解析，采用绑定，理解更直观避免解析标签
				},
				methods: {
					add: function() {
						return this.num++;
					}
				}
			})
		</script>
	</body>

</html>